<template>
  <div class="login">
      <div class="title">
        <span>注册</span>
      </div>
      <div class="content">
        <div class="fileInput">
            <h3>手机号</h3>
            <div class="ipt">
                <input type="text" placeholder="请输入手机号" oninput="value=value.replace(/[^\d]/g,'')" v-model="phone">
            </div>
        </div>
         <div class="fileInput">
            <h3>密码</h3>
            <div class="ipt">
                <input :type="type" placeholder="请输入密码" v-model="password">
                <i class="iconfont iconyanjing" v-if="show" @click="changType('open')"></i>
                <i class="iconfont iconbiyan"  v-else @click="changType('close')"></i>
            </div>
         </div>
          <div class="fileInput">
            <h3>验证码</h3>
            <div class="ipt">
                <input type="text" placeholder="请输入短信验证码" v-model="phoneCode" >
                <span @click="sendCode" class="aspan">
                  <span v-show="timeShow">{{content}}</span>
                  <span>{{code}}</span>
               </span>
            </div>
        </div>
          <div class="fileInput">
            <h3>邀请码</h3>
            <div class="ipt">
                <input :type="type" placeholder="请输入邀请码" v-model="InvitationCode">
                <!-- <i class="iconfont iconyanjing" v-if="show" @click="changType('open')"></i>
                <i class="iconfont iconbiyan"  v-else @click="changType('close')"></i> -->
            </div>
         </div>
      </div>
      <p class="noAccount">
        <span>已有账号?</span><span @click="goLogin">去登录</span>
      </p>
      <div class="confirm" @click="confirmRegiest">
        确定
      </div>
        <div style="font-size:0.3rem">
            <div class="first">
                <div class="type_tit">
                    <span class="line"></span>
                    <span>快速登陆</span>
                    <span class="line"></span>
                </div>
                <div class="type_con" >
                    <img src="../assets/realname/wxloge.png" @click="wxlog">
                </div>
            </div>
        </div>
      <div class="radio">
        <van-checkbox v-model="checked" checked-color="#38A83F"></van-checkbox>
        <span>我已阅读并同意<span class="serve" @click="agreement">服务协议</span>和<span  class="serve" @click="policy">隐私政策</span></span>
      </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
  export default {
    name:'login',
    data (){
       return {
           show:false,
           checked: true,
           type:'password',
           phone:'', //账号
           password:'',//密码
           phoneCode:'', //短信验证码
           InvitationCode:"",//邀请码
           phoneCodeS:'',
           code:'获取验证码',
           timea:null,
           tiames:"",
           time: null,
           timeShow: false,
           content: "60秒",  // 按钮里显示的内容
           totalTime: 60      //记录具体倒计时时间
       }
    },
    mounted() {
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods:{
       goLogin (){
          this.$router.push('/login');
       },
        changType(val){
          this.show=!this.show
          if(val=='open'){
             this.type='password'
          }else{
             this.type='text'
          }
       },
       //发送手机验证码
       sendCode (){
         if(this.code!='获取验证码') return;
         if(this.phone==''){
             Toast('请输入手机号')
             return false
         }
         if(this.password==''){
             Toast('请输入密码')
             return false
         }
         this.note();
       },
       //短信
       note(){
          this.$axios.post("/system/user/verificationCode",{
               phoneNumber:this.phone,
             }).then(res =>{
                console.log("yanz",res)
                this.tiames = 60;
                if(res.data.code==0){
                  this.timeShow = true;
                  this.code="后重新获取"
                  clearInterval(set)
                  let set = setInterval(() => {
                     this.totalTime --
                     this.content = this.totalTime +"秒";
                     if(this.totalTime <= 0){
                        clearInterval(set);
                        this.timeShow = false;
                        this.tiames = "";
                        this.totalTime = 60;
                        this.content = "60秒"
                        this.code="获取验证码"
                     }
                  }, 1000);
                }
          
             })
       },
       //确定注册
       confirmRegiest (){
          console.log(this.phone.length)
           var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
           if(this.phone == '' ){
              Toast('请输入手机号')
              return false
           } 
           else if(this.phone.length != 11 || !myreg.test(this.phone)){
              Toast("请输入正确手机号")
              return false
           }
           else if(this.password==''){
              Toast("请输入密码")
              return false
           }
            else if(this.password.length < 6){
              Toast("密码不能小于6位")
              return false
           }
            else if(this.phoneCode.length != 6){
              Toast("验证码错误")
              return false
           }
           else if(this.phoneCode==''){
              Toast("请输入手机验证码")
              return false
           }else{
              this.$axios.post('/system/user/villagerAddSave',{
                  loginName:this.phone,
                  password:this.password,
                  verificationCode:this.phoneCode,
                  invitationCode:this.InvitationCode,
                  
              }).then(res =>{
                  console.log(res)
                   if(res.data.code==0){
                     //  Toast(res.data.msg)
                      this.goIndex()
                     //  this.$router.push({path:'/login',query:{phone:this.phone,password:this.password}});
                     //  this.$router.push('/index')
                   }else{
                       Toast(res.data.msg)
                   }
              })
           }
       },
      //  登陆
        goIndex() {
            // console.log("账号",this.phone)
            // console.log("密码",this.password)
            // console.log("短信",this.phoneCode)
            if (this.phone == "") {
            Toast("请输入手机号");
            return false;
            } else if (this.password == "") {
            Toast("请输入密码");
            return false;
            } else {
            this.$axios
               .post("/login", {
                  username: this.phone,
                  password: this.password,
                  rememberMe: false
               })
               .then(res => {
                  console.log(res)
                  if (res.data.code == 0) {
                     this.$store.commit('changeToken',res.data.data.token);
                     localStorage.setItem('key',JSON.stringify(res.data.data));
                     // Toast(res.data.msg);
                     this.$router.push('/index')
                  } else {
                  Toast(res.data.msg);
                  }
               });
            }
        },
        //微信快速登陆
        wxlog(){
            this.$utils.wxlog(this);
        },
        //取出微信用户登陆信息
        wxlocalStorage(){
            // alert("微信用户信息");
            let list = JSON.parse(localStorage.getItem("wxprame"));
            this.openid = list.openid;
            // alert("open"+this.openid);
            this.$axios.post("/login", {
                openId:this.openid
            }).then(res =>{
                if (res.data.code == 301){
                    this.$router.push("/wxLoge");
                    return false;
                }
                if(res.data.code == 0){
                    this.$store.commit('changeToken',res.data.data.token);
                    localStorage.setItem('key',JSON.stringify(res.data.data));
                    this.$router.push("/index");
                    return false;
                }
            })
        },
        agreement(){
            this.$router.push({path:"/TermsOfService",query:{type:"40",value:"服务协议"}})
        },
        policy(){
            this.$router.push({path:"/TermsOfService",query:{type:"30",value:"隐私政策"}})
        },
        goBack(){
            mui.init({
                keyEventBind: {
                backbutton: true, //关闭back按键监听
                }
            })
            //首页返回键处理
            // 处理逻辑： 1s内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function(){
                // 首次按键， 提示 再按一次退出应用
                if(!first){
                first = new Date().getTime();//记录第一次按下回退键的时间
                mui.toast("再按一次退出应用");
                //   history.go(-1); // 回退到上一页
                setTimeout(function(){
                    //1s 后清除
                    first = null;
                }, 1000);

                }else{
                if(new Date().getTime() - first < 1000){
                    //如果两次按下的时间小于1s
                    plus.runtime.quit(); //那么就退出app
                }
                }
            }
                
        },
    }
  }
</script>

<style lang="less" scoped>
  .login{
     width: 100%;
     height: 100%;
     font-size: 0;
     position: relative;
     .title{
        display: flex;
        justify-content:center;
        font-size: 0.36rem;
        color:#333;
        height: 1.27rem;
        background-color: #fff;
        align-items: center;
        font-weight: bold;
     }
     .content{
       padding:0rem 0.3rem;
       box-sizing: border-box;
       margin-top:1.3rem;
        .fileInput{
          border-bottom: 1px solid #C4C2C2;
          margin-bottom: 0.2rem;
            h3{
              font-size: 0.36rem;
              color:#333;
            }
            .ipt{
               padding:0.15rem 0;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               justify-content: space-between;
               font-size: 0.26rem;
              input{
                  font-size: 0.3rem;
                 color:#999;
                 background-color: transparent;
                 border-left:2px solid #1DBE61;
                 text-indent: 0.1rem;
                 width: 72%;
                 height: 100%;
                  &::placeholder{
                  font-size: 0.28rem;
                  color:#999;
               }
              }
              .aspan{
                 display: inline-block;
                 display: flex;
                 color:#38A83F;
                 padding: 0.1rem;
                 box-sizing: border-box;
                 //  width: 1.7rem;
                //  height: 100%;
                //  border: 0.01rem solid #999;
                //  line-height: 0.5rem;
                //  padding-left: 0.3rem;
                //  border-radius: 0.2rem;
                //  text-align: center;
                //  background: #999;
              }
            }
        }
     }
     .noAccount{
        font-size: 0.28rem;
        color:#666;
        padding-left:0.3rem;
        box-sizing: border-box;
        span:nth-child(2){
           color:#38A83F;
        }
      }
      .confirm{
        width:4.8rem;
        height:.8rem;
        background:rgba(56,168,63,1);
        border-radius:.3rem;
        color:#fff;
        font-size: 0.36rem;
        line-height: 0.8rem;
        margin:0 auto;
        text-align: center;
        margin-top:1.2rem;
        border-radius: 0.4rem;
      }
      .first{
        width: 100%;
        padding:0.3rem 0;
        box-sizing: border-box;
        .type_tit{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .line{
                display: inline-block;
                width: 40%;
                height: 1px;
                background-color: rgba(100,100,100,0.3);
            }
        }
        .type_con{
            width: 100%;
            height: 0.7rem;
            text-align: center;
            margin-top: 0.2rem;
            img{
                width: 0.7rem;
                height: 0.7rem;
                
            }
        }
    }   
      .radio{
         font-size: 0.26rem;
         color:#666;
         display: flex;
         justify-content: center;
        //  margin-top:0.05rem;
         vertical-align: center;
         .van-checkbox{
            transform: scale(0.7);
         }
         .serve{
           color:#38A83F;
         }
          span{
            margin-top:0.02rem;
         }
      }
  }
</style>
